<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击按钮切换图片</title>

    <!--作业02：点击按钮切换图片：20210340908付飞飞-->

    <style>
        #test{
            position: absolute;
        }


        #left{
            top: 134px;
            z-index: 99;
            width: 280px;
            height: 39px;
            background-color: black;
            color: white;
            font-size: 24px;

        }


        #right{
            right: 0;
            top: 134px;
            z-index: 99;
            width: 280px;
            height: 39px;
            background-color: black;
            color: white;
            font-size: 24px;
        }


        img{
            width: 300px;
            height: 500px;
             
        }
         
    </style>
</head>
<body>

          <div id="test" >
            <img v-bind:src = "'images/image0'+num+'.jpg'"/><br>
            <input  type="button" value="点击我切换到上一张照片" id="left" @click = "changeleft" v-if="lefttt"/>
            <input  type="button" value="点击我切换到下一张照片" id="right" @click = "changeright" v-show="righttt"/>
 
        </div>
    </body>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
          
         var dated = new Vue({
             //挂载点
             el: "#test",
             //数据
             data: {
                num: 1,
                lefttt:false,
                righttt:true,
             },
             methods: {
                 changeleft : function (){
                    if(this.num <= 2){
                        this.lefttt=false;
                        this.num = 1;
                    }else{
                        this.lefttt=true;
                        this.num--;
                    }
                     
                    this.righttt=true;
                 },
                 
                 changeright : function (){
                    if(this.num >= 7){
                        this.righttt=false;
                        this.num = 8;
                    }else{
                        this.righttt=true;
                        this.num++;
                    }
                     
                    this.lefttt=true;
                     
                 }
             }
         });
     
    </script>
</html>